What’s the Difference Between Digital Design and Print Design? A Helpful Guide
At one time, graphic designers were print designers—used to creating layouts for posters, books and brochures. Now, in the 2020s, the definition of what graphic designers actually do is becoming increasingly broad…and increasingly digitised.
From UX design to web design, app design to social design, there’s a whole range of design fields that have emerged in the digital era. Of course, this doesn’t mean graphic designers have to know how to code. However, having some idea about digital design can help you to create designs for print that translate to screens seamlessly, while a little knowledge of the basics of digital design can help you to broaden your skillset and offer your clients a little something extra.
If you’re starting out in graphic design, or are a seasoned print designer looking to learn a little more about the world of online design, this quickstart guide will help you to find your feet in the digital world.
What is Print Design?
Traditionally (i.e. before the birth of the internet), graphic designers were print designers and the two were synonymous. Print design includes, but isn’t limited to:
- Branding for print
- Packaging design
- Publishing and editorial design
- Stationery design
- Exhibition and signage design
- Poster design
Today, many graphic designers will find that the designs they create for print must also translate effectively to digital screens. While some graphic designers find that they can get by with knowing the basics (scroll down to Digital Design Tips for Graphic Designers, below), others might become full-time digital designers, applying their skills to web design, UX design or social media design.
What is Digital Design?
Although the majority of print design work is created using digital software, digital design refers to design which is created solely for digital purposes and devices. If you can see and interact with a design on a screen—whether it be on a phone, desktop or digital billboard—this is a form of digital design.
The main digital design disciplines are:
1. Web design
The original digital design discipline, web designers create the layouts and styling of websites, often with the help of a web developer.
While developers ensure the website is built, hosted and maintained, a web designer’s job is to define the aesthetic of the site. From selecting web fonts to formulating color palettes, defining photography styles to creating a wireframe (a sort of blueprint for the layout of the site’s pages), a web designer might create a live demo of the site before the developer takes over, or use web design software like Adobe Dreamweaver, Canva or Google Web Designer.
2. App design
Similar to the above, except that the designs are optimised for apps. App designers may have to take into account the limited screen size used by most app users, as well as give more consideration to icons, accessibility and UX design (see below).
3. UX and UI design
User experience (UX or UE) design is a relatively young discipline, and combines aspects of graphic design with psychology, interaction design and anthropology, as well as other fields. At its core, UX design aims to provide users of websites and apps with the best possible experience, allowing them to have a seamless and efficient journey through a digital design.
UI (user interface) design is different to UX in that it tends to focus more on the design and aesthetics of a digital design, and how this can be enhanced to achieve a better user experience.
4. Branding for web
Brand design is a more familiar subject for graphic designers, who are used to creating logos and identities for print media (see What is Print Design, above). Branding for web simply refers to how that brand design translates to digital media, such as websites and apps. For example, a graphic designer might need to provide a brand color palette with HEX swatches as well as printable CMYK versions, or optimise a logo design as a much smaller favicon for a browser tab.
5. Social media design
Social media design refers to designs created for social media, including but not limited to, posts and stories on Instagram, Twitter, Facebook and TikTok, as well as social media advertising. Once the domain of social media marketers, businesses are increasingly seeking out specialised designers to create content for social media that uses creative designs for static and video content.
Now you know a little more about what the main digital design disciplines are, you might be wondering how you can start to use digital design in your own projects. Scroll down to learn how you can adapt your design work for screens and discover tips and tricks for making your print designs digital-ready in no time!
Digital Design Tips for Graphic Designers
If the thought of UX design makes you turn pale, don’t panic! There is a good reason why these specialist disciplines have emerged over the past decade—each aspect of digital design requires particular experience and specialist knowledge. Of course, it’s very likely graphic designers—including traditional print designers—will have to interact with digital design at some point. The tips below are intended to help graphic designers engage productively with digital designers, and help adapt your print projects to screens.
Tip 1: Convert to HEX colour
While CMYK, spot colours and Pantone are the language of print designers, for digital designers RGB swatches are the standard, with HEX codes—which render RGB values as a hexadecimal code, e.g. #ff8e00 (dark orange)—used ubiquitously across web and app design.
Tip: If you create a CMYK palette, it’s not always a good idea to use automated conversion to create an RGB palette (i.e. by simply switching the colour to RGB using Adobe software or an eyedropper tool). RGB colour works by emitting light, making them appear very differently (and brightly in comparison) to their CMYK counterparts. You can use a colour tool like Adobe Color to convert and tweak colour swatches between CMYK and RGB modes.
Tip 2: Design with interaction and animation in mind
As video content becomes increasingly normalised across websites and social media platforms, designers are becoming more used to adapting their static content for animation. While graphic designers don’t have to become animators overnight, it can be useful to consider how your design could be animated or incorporated into a video. Whether it’s a logo that could transform from one thing into another, or an illustration that could be animated as part of a simple GIF, think about how your static work could be given motion and dynamism.
Tip: You can use Adobe Photoshop’s Timeline feature to create quick video animations from static images (Window > Timeline).
Tip 3: Use typefaces that include web fonts
Graphic designers are always falling for the latest lust-worthy typeface…but take a moment to find out whether your typeface of desire is available as a webfont. Webfonts are fonts which have been specially created for use on websites and apps, and contain CSS code to allow the font to be rendered on your website for viewers to see.
While you can use OTF (OpenType Font) and other types of font files on most web applications, WOFF (Web Open Font Format) is the standard file type for use online.
Tip: Note that you will also usually require a separate webfont licence to use your chosen font on websites and apps.
Tip 4: Rethink sizing
A billboard is huge. A poster is big. A mobile phone screen is teeny tiny. Graphic designers who are used to creating layouts for large-scale media will need to get used to working in miniature when working on digital designs.
Tip: Reconsider the sizing of elements such as type, graphics, icons and buttons (hint: they will need to take up more space on your layouts to be legible). Develop a habit of viewing completed designs on your phone screen—this will give you a good sense of how legible elements are when set at a particular scale.
Tip 5: Consider accessibility and usability
While UX and UI designers are habituated with considering these issues, print designers are not always as well initiated when it comes to accessibility.
Why is accessibility important on screens? First of all, as pointed out above, screens are often much smaller than printed layouts, meaning that text and other elements are already more difficult to read and see. In addition, the brightness of screens can diminish the visibility and legibility of text for visually-impaired users.
Consider the effect of colour contrast, text size and layout design on how users can view and interact with your design. Vision simulator tools like Web Disability Simulator can help you to assess how a design would appear to users with different vision impairments.
Conclusion: Time to Go Digital?
While digital design is ever-evolving and ever-expanding, there will always be a place for print design in the industry. Nonetheless, print designers will undoubtedly have to consider how static, printable designs can be adapted for screens.
Armed with a little know-how about HEX colours and webfonts, even the most committed of print designers might be tempted to explore the exciting possibilities of digital design.
Want to keep a footing in the tangible world? These print design tutorials will help to hone your hard-copy skills:
- The Essential Guide to Print Finishes
- The Most Popular Standard Book Sizes in the US and UK
- How to Make a Zine in Adobe InDesign
Illustrations used throughout by Kate Pilko.